<template>
    <div class="platformSelect">
        <!-- <el-select :style="{ width: '120px' }" v-model="platform" @change="platformChange">
            <el-option v-for="item in platformList" :key="item.value" :label="item.name" :value="item.value" />
        </el-select> -->
        <el-text class="cursor-pointer flex items-center dark:!text-[#d6d6d6]" @click="popoverVisible = true">
            <screensvg class="text-[#fff] w-[14px] h-[14px] mr-[8px]" />
            {{ PLATFORM_LIST[platform]?.name }}
            <el-icon ref="buttonRef" class="ml-[4px]">
                <ArrowDown class="text-[#fff]"/>
            </el-icon>
        </el-text>
        <el-popover ref="popoverRef" v-model:visible="popoverVisible" popper-class="platformSelect-popper"
            :virtual-ref="buttonRef" trigger="click" placement="bottom-end" virtual-triggering persistent>
            <div v-for="(item, index) in platformList" :key="item.value" :class="`h-[38px] text-center py-[12px] cursor-pointer
             ${index != platformList.length - 1 ? 'border-b' : ''}
                border-solid border-[var(--el-border-color-lighter)]
                hover:bg-[var(--bg-3)] hover:!text-[var(--el-color-primary)]
                ${platform == item.value ? 'checked-item' : 'dark:text-[#d6d6d6]'} popover-item`"
                @click="platformChange(item.value)">
                <span class="h-[14px]  !text-[14px] leading-[14px] flex items-center justify-center">
                    <component :is="item?.icon"
                        class="dark:fill-[#d6d6d6] w-[14px] h-[14px] mx-[8px] popover-item-icon" />
                    {{ item.name }}
                </span>
            </div>
        </el-popover>
    </div>
</template>
<script setup lang="ts">
import screensvg from '@/assets/screenimg/screenSvg/screenicon.svg?component'
import { userKey } from '@/utils/auth'
import { storageLocal } from "@pureadmin/utils";
import { PLATFORM_LIST, PLATFORM_Map } from "@/constant/index";
import { usePageVariablesStoreHook } from '@/store/modules/pageVariables'
import { ArrowDown } from '@element-plus/icons-vue'
import dark from '@/assets/images/svg/dark.svg'
import { debounce } from "@pureadmin/utils";
import { message } from '@/utils/message';
import { usePageReloadStoreHook } from "@/store/modules/pageReload";
const platform = ref(null as any);
const platformList = shallowRef([] as any)
const usePageVariablesStore = usePageVariablesStoreHook()
const buttonRef = ref()
const popoverRef = ref()
const popoverVisible = ref(false)
onBeforeMount(() => {
    if (storageLocal().getItem(userKey).userInfo?.allowPortal) {
        storageLocal().getItem(userKey).userInfo?.allowPortal?.forEach(item => {
            PLATFORM_LIST[item] && platformList.value.push(PLATFORM_LIST[item])
        });
    } else {
        const myArray: [string, { name: string; value: PLATFORM_Map; }][] = Object.entries(PLATFORM_LIST);
        myArray.forEach(item => {
            platformList.value.push(item[1])
        });
    }
    platform.value = usePageVariablesStore.getPlatform()
    if (!platformList.value.find(item => item.value === platform.value)) {
        console.log(platformList.value);
        message(`暂无${PLATFORM_LIST[platform.value]?.name}权限，请联系管理员！`, { type: "warning" })
        platformChange(platformList.value[0].value)
    }
})
const platformChange = (val: number) => {
    usePageVariablesStore.setPlatform(val)
    window.location.reload();
    // usePageReloadStoreHook().reloadPages()
};
</script>
<style lang="scss" scoped>
.platformSelect-popper {
    padding: 0px !important;
    width: 110px !important;
    min-width: 110px !important;
    background: var(--bg-2) !important;
    border-radius: 5px;

    .el-popper__arrow::before {
        background: var(--bg-2) !important;
    }

    .checked-item {
        background-color: var(--bg-3);
        color: var(--el-color-primary) !important;

        .popover-item-icon {
            fill: var(--el-color-primary);
        }
    }

    .popover-item:hover {
        .popover-item-icon {
            fill: var(--el-color-primary);
        }
    }
}
</style>
